﻿@namespace MudBlazor.Docs.Examples

<MudGrid>
    <MudItem xs="12" md="3">
        <MudText Typo="Typo.h6">Anchor Origin</MudText>
        <MudRadioGroup @bind-SelectedOption="@AnchorOrigin" Class="d-flex flex-column my-2">
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.TopLeft">Top-Left</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.TopRight">Top-Right</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.BottomLeft">Bottom-Left</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.BottomRight">Bottom-Right</MudRadio>
        </MudRadioGroup>
        <MudText Typo="Typo.h6">Transform Origin</MudText>
        <MudRadioGroup @bind-SelectedOption="@TransformOrigin" Class="d-flex flex-column  my-2">
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.TopCenter" Disabled="true">Top-Center</MudRadio>
        </MudRadioGroup>
    </MudItem>
    <MudItem xs="12" md="9" Class="d-flex align-center justify-center flex-column">
        <MudMenu Label="Change Anchor Origin" Variant="Variant.Filled" Color="Color.Info" AnchorOrigin="@AnchorOrigin" TransformOrigin="@TransformOrigin">
            <MudMenuItem>1</MudMenuItem>
            <MudMenuItem>2</MudMenuItem>
            <MudMenuItem>3</MudMenuItem>
        </MudMenu>
        <MudText Typo="Typo.overline">Click the button to see effect</MudText>
    </MudItem>
</MudGrid>

@code {
    public Origin AnchorOrigin { get; set; } = Origin.TopLeft;
    public Origin TransformOrigin { get; set; } = Origin.TopCenter;
}
